<!-- 预览时被GenerateFormItem调用,生成具体组件-->
<template>

  <span>
    <div>

      <el-dialog
        :close-on-click-modal="false"
        title="添加批注"
        :visible.sync="annotationDialogVisible"
        width="25%"
        :modal-append-to-body="true"
        :append-to-body="true"
      >
        <el-form :inline="true" :model="annotationForm" style="margin-left: -25px;">
          <el-form-item label="批注内容">
            <el-input v-model="annotationForm.context" type="textarea" :rows="2" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="annotationConfirm">确 定</el-button>
          <el-button @click="annotationDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="clearAnnotation">清除批注</el-button>
        </span>
      </el-dialog>
    </div>
    <template v-if="widget.type == 'blank'">
      <div :style="{width:elShowWidth(isTable,widget.options.width)}">
        <slot :name="widget.model" :model="dataModels" />
      </div>

    </template>

    <template v-if="widget.type == 'input' && widget.options.show == true">
      <span v-if="widget.tip !== undefined && widget.tip!=null">
        <el-tooltip class="item" effect="dark" :content="widget.tip" placement="right-end">

          <el-input
            v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
            v-model.number="dataModel"
            :type="widget.options.dataType"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :clearable="widget.options.clearable"
            :style="{width:elShowWidth(isTable,widget.options.width)}"
          />

          <el-input
            v-else
            v-model="dataModel"
            :type="widget.options.dataType"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"

            :style="{width:elShowWidth(isTable,widget.options.width)}"
          />
        </el-tooltip>

      </span>

      <span v-else>
        <el-input
          v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
          v-model.number="dataModel"
          :type="widget.options.dataType"
          :name="widget.model"
          :disabled="widget.options.disabled"
          :placeholder="widget.options.placeholder"
          :clearable="widget.options.clearable"
          show-password="{widget.options.showPassword==true}"
          :style="{width:elShowWidth(isTable,widget.options.width)}"
        />

        <span v-else>
          <el-input
            v-if="widget.options.showPassword==true"

            v-model="dataModel"
            :type="widget.options.dataType"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :clearable="widget.options.clearable"
            show-password
            :style="{width:elShowWidth(isTable,widget.options.width)}"
          />
          <el-input
            v-else

            v-model="dataModel"
            :type="widget.options.dataType"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            clearable
            :style="{width:elShowWidth(isTable,widget.options.width)}"
          >
            <template v-if="widget.options.unit!=undefined && widget.options.unit.length>0" slot="append">{{ widget.options.unit }}</template>
          </el-input>
        </span>
        <span
          v-if="widget.options.showAnnotation"
          :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
          @click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
        </span>

      </span>

    </template>
    <el-dialog :close-on-click-modal="false" title="" :visible.sync="dialogFormVisible" :append-to-body="true" width="80%">
      <el-table :data="customDialogData" @row-click="singleElection">
        <el-table-column
          width="55"
        >
          <template slot-scope="scope">
            <el-radio v-model="templateSelection" class="radio" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column
          v-for="customDialogTableColumn in customDialogTableColumns"
          :key="customDialogTableColumn"
          :prop="customDialogTableColumn.columnKey"
          :label="customDialogTableColumn.description"
        />
      </el-table>

      <el-pagination
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="formCustomDialogCurrentPage"
        :page-size="formCustomDialogPageSize"
        :total="formCustomDialogTotal"
        layout="total,jumper,prev, pager, next,sizes"
        @size-change="handleformCustomDialogSizeChange"
        @current-change="handleformCustomDialogCurrentChange"
      />
      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmFormCustomDialog()">确 定</el-button>
      </div>
    </el-dialog>

    <template v-if="widget.type == 'dialog'">

      <el-button
        type="primary"
        :class="widget.options.icon"
        @click="handleDialog()"
      >{{ widget.options.btnName }}</el-button>
    </template>
    <el-dialog title="" :visible.sync="userDialogFormVisible" :append-to-body="true" width="80%">
      <el-table v-if="widget.options.isSingle" :data="customDialogData" @selection-change="userDialogFormchangeFun">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          v-for="(item,index) in customDialogTableColumns"
          :key="index"
          :prop="item.columnKey"
          :label="item.description"
        />
      </el-table>
      <el-table v-else :data="customDialogData" @row-click="userDialogingleElection">
        <el-table-column
          width="55"
        >
          <template slot-scope="scope">
            <el-radio
              v-model="templateSelection"
              class="radio"
              :label="scope.$index"
            >&nbsp;</el-radio>

          </template>
        </el-table-column>
        <el-table-column
          v-for="customDialogTableColumn in customDialogTableColumns"
          :key="customDialogTableColumn"
          :prop="customDialogTableColumn.columnKey"
          :label="customDialogTableColumn.description"
        />
      </el-table>

      <el-pagination
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="formCustomDialogCurrentPage"
        :page-size="formCustomDialogPageSize"
        :total="formCustomDialogTotal"
        layout="total,jumper,prev, pager, next,sizes"
        @size-change="handleUserformCustomDialogSizeChange"
        @current-change="handleUserformCustomDialogCurrentChange"
      />
      <div slot="footer" class="dialog-footer">

        <el-button @click="userDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmUserFormCustomDialog()">确 定</el-button>
      </div>
    </el-dialog>

    <template v-if="widget.type == 'userDialog'">
      <el-tag
        v-for="(tag) in widget.options.chooseFiledList"
        :key="tag.key"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag.lable }}
      </el-tag>

      <el-button
        type="primary"
        :class="widget.options.icon"
        @click="handleUserDialog()"
      >{{ widget.options.btnName }}</el-button>
    </template>

    <template v-if="widget.type == 'iframe' && widget.options.show == true">
      <iframe
        frameborder="0"
        scrolling="auto"
        :src="widget.options.src"
        :width="widget.options.width"
        :height="widget.options.height"
      />

    </template>
    <template v-if="widget.type == 'textarea' && widget.options.show == true">
      <el-input
        v-model="dataModel"
        type="textarea"
        :rows="1"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'badge' && widget.options.show == true">

      <el-badge
        v-model="widget.options.defaultValue"
        :value="widget.options.defaultValue"
        :max="widget.options.max"
        :is-dot="widget.options.dot"
        class="item"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'inputNumber' && widget.options.show == true">

      <el-input-number
        v-model="dataModel"
        :max="widget.options.max"
        :min="widget.options.min"
        :step="widget.options.step"
        :disabled="widget.options.disabled"
        :size="widget.options.radioSize"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'number' && widget.options.show == true">
      <el-input-number
        v-model="dataModel"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
        :step="widget.options.step"
        :disabled="widget.options.disabled"
        controls-position="right"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'h4'">
      <h4>{{ widget.options.defaultValue }}</h4>   <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'p'">
      <p>{{ widget.options.defaultValue }}</p>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'small'">
      <small>{{ widget.options.defaultValue }}</small>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'mark'">
      <mark>{{ widget.options.defaultValue }}</mark>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'del'">
      <del>{{ widget.options.defaultValue }}</del>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'u'">
      <u>{{ widget.options.defaultValue }}</u>
    </template>
    <template v-if="widget.type == 'em'">
      <em>{{ widget.options.defaultValue }}</em>
    </template>
    <template v-if="widget.type == 'strong'">
      <strong>{{ widget.options.defaultValue }}</strong>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'icon'">
      <i :class="widget.options.icon">{{ widget.options.defaultValue }}</i>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'radio' && widget.options.show == true">
      <el-radio-group
        v-if="(widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey=='')"
        v-model="dataModel"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      >
        <el-radio
          v-for="(item, index) in ( widget.options.options)"
          :key="index"
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
          :border="widget.options.border"
          :disabled="widget.options.disabled"
          @change="fireControlsRule"
        >
          {{ widget.options.showLabel ? item.label : item.value }}
        </el-radio>

      </el-radio-group>

      <el-radio-group
        v-else
        v-model="dataModel"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      >
        <el-radio
          v-for="(item, index) in remoteFuncsFields "
          :key="index"
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
          :border="widget.options.border"
          :disabled="widget.options.disabled"
          @change="fireControlsRule"
        >
          <template>{{ widget.options.showLabel ? item.label : item.value }}</template>
        </el-radio>
      </el-radio-group>

      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>

    </template>

    <template v-if="widget.type == 'checkbox' && widget.options.show == true">

      <el-checkbox-group
        v-model="dataModel"
        :style="{width: isTable ? '100%' : widget.options.width}"
      >
        <el-checkbox

          v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
          :key="index"
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
        >
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time' && widget.options.show == true">
      <el-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrow-control="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type=='date' && widget.options.show == true">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
        :format="widget.options.format"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
        @change="changeDate"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type =='rate' && widget.options.show == true">
      <el-rate
        v-model="dataModel"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      />
    </template>

    <template v-if="widget.type == 'color' && widget.options.show == true">
      <el-color-picker
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :show-alpha="widget.options.showAlpha"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'dividers'">
      <el-divider />
    </template>
    <template v-if="widget.type == 'select' && widget.options.show == true">
      <el-select
        v-if="widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey.length>0"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
        :filterable="widget.options.filterable"
        @change="fireControlsRule"
      >

        <el-option
          v-for="item in remoteFuncsFields"
          v-if="widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey.length>0"
          :key="item.value"
          :value="item.value"
          :label="item.value"
        />
      </el-select>

      <el-select
        v-else
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
        :filterable="widget.options.filterable"
        @change="fireControlsRule"
      >

        <el-option
          v-for="item in (widget.options.options)"
          :key="item.value"
          :value="item.value"
          :label="item.value"
        />

      </el-select>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'alert'">
      <el-alert
        v-model="dataModel"
        :title="widget.options.title"
        :closable="widget.options.closable"
        :show-icon="widget.options.showIcon"
        :effect="widget.options.item"
        :type="widget.options.alertType"
        :close-text="widget.options.closeText"
        :center="widget.options.center"
      >{{ widget.options.defaultValue }}</el-alert>
    </template>

    <template v-if="widget.type == 'steps'">

      <el-steps
        v-model="dataModel"
        :active="widget.options.defaultValue"
        :finish-status="widget.options.finishStatus"
        :align-center="widget.options.alignCenter"
        :simple="widget.options.simple"
        :process-status="widget.options.processStatus"
        :direction="widget.options.direction"
      >

        <el-step v-for="item in widget.options.stepItemOptions" :key="item.value" :title="item.value" />

      </el-steps>
      <el-button style="margin-top: 12px;" type="primary" :disabled="widget.options.nextStep" @click="nextStep(widget)">下一步</el-button>
    </template>

    <template v-if="widget.type == 'tag'">
      <el-tag
        v-for="(tag, tagsIndex) in widget.options.options"
        :key="tagsIndex"
        v-model="dataModel"
        closable
        :disable-transitions="false"
        size="widget.options.radioSize"
        :type="tag.value"
        @close="handleTagClose(tag,tagsIndex)"
      >
        {{ tag.label }}
      </el-tag>
    </template>

    <template v-if="widget.type == 'link'">

      <el-link
        v-model="dataModel"
        :href="widget.options.href"
        :target="widget.options.target"
        :underline="widget.options.underline"
      >{{ widget.options.defaultValue }}
      </el-link>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'breadcrumb'">

      <el-breadcrumb :separator="widget.options.separator">

        <el-breadcrumb-item
          v-for="item in widget.options.breadcrumbItemOptions"
          :key="item.value"
          :value="item.value"
        >
          {{ item.value }}
        </el-breadcrumb-item>

      </el-breadcrumb>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'dateCalendar'">
      <el-calendar

        v-model="dataModel"
      >
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
          </p>
        </template>
      </el-calendar>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'progress'">

      <el-progress
        :percentage="widget.options.percentage"
        :type="widget.options.progressType"
        :status="widget.options.status"
        :show-text="widget.options.showText"
        :stroke-width="widget.options.strokeWidth"
        :text-inside="widget.options.textInside"
      />

      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type=='switch' && widget.options.show == true">
      <el-switch
        v-model="dataModel"
        :disabled="widget.options.disabled"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type=='btn' && widget.options.show == true">
      <el-button
        :size="widget.options.radioSize"
        :style="{'margin-left':widget.options.marginLeft}"
        :type="widget.options.type"
        :plain="widget.options.plain"
        :round="widget.options.round"
        :circle="widget.options.circle"
        :loading="widget.options.loading"
        :icon="widget.options.icon"
        @click="clickBtn()"
      >{{ widget.options.name }}</el-button>
    </template>

    <template v-if="widget.type=='slider' && widget.options.show == true">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :show-tooltip="widget.options.showTooltip"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'editor' && widget.options.show == true">
      <fm-editor
        v-model="dataModel"
        :width="isTable ? '100%' : widget.options.width"
        :height="widget.options.height"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type=='fileUpload' && widget.options.show == true">
      <fm-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{'width': isTable ? '100%' : widget.options.width}"
        :width="widget.options.sizes!=null?widget.options.sizes.width:200"
        :height="widget.options.sizes!=null?widget.options.sizes.height:200"
        :token="widget.options.token"
        :domain="widget.options.domain"
        :multiple="widget.options.multiple"
        :length="widget.options.length"
        :is-qiniu="widget.options.isQiniu"
        :is-delete="widget.options.isDelete"
        :min="widget.options.min"
        :is-edit="widget.options.editable"
        :action="widget.options.action"
        :supported-type-str="widget.options.supportedTypeStr"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type=='imgupload' && widget.options.show == true">
      <image-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{'width': isTable ? '100%' : widget.options.width}"
        :width="widget.options.size.width"
        :height="widget.options.size.height"
        :token="widget.options.token"
        :domain="widget.options.domain"
        :multiple="widget.options.multiple"
        :length="widget.options.length"
        :is-qiniu="widget.options.isQiniu"
        :is-delete="widget.options.isDelete"
        :min="widget.options.min"
        :is-edit="widget.options.isEdit"
        :supported-type-str="widget.options.supportedTypes"
        :action="widget.options.action"
      />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <!--        省市级联-->
    <template v-if="widget.type == 'cascader' && widget.options.show == true">
      <div v-if="widget.options.modeMethod=='provinceAndCityData'">
        <el-cascader v-model="dataModel" :options="provinceAndCityData" />

      </div>
      <div v-else-if="widget.options.modeMethod=='provinceAndCityDataPlus'">
        <el-cascader v-model="dataModel" :options="provinceAndCityDataPlus" />

      </div>
      <div v-else-if="widget.options.modeMethod=='regionData'">
        <el-cascader v-model="dataModel" :options="regionData" />

      </div>
      <div v-else-if="widget.options.modeMethod=='selectedOptions'">

        <el-cascader v-model="dataModel" :options="regionDataPlus" />

      </div>   <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>

    </template>

    <template v-if="widget.type == 'text' && widget.options.show == true">

      <span v-if=" widget.options.tip!== undefined && widget.options.tip.length>0">

        <el-tooltip class="item" effect="dark" :content="widget.options.tip" placement="right-end">
          <!--                 <span  :style="{color:(widget.options.color.length>0?widget.options.color:'')}">{{dataModel}}</span>-->
          <span :style="{'font-weight':widget.options.bold?'bold':'normal',color:widget.options.color,fontSize:(widget.options.fontSize+'px')}">{{ dataModel }}</span>

        </el-tooltip>
      </span>
      <span v-else>
        <span :style="{'font-weight':widget.options.bold?'bold':'normal',color:widget.options.color,fontSize:(widget.options.fontSize+'px')}">{{ dataModel }}</span>

      </span>

    </template>

    <template v-if="widget.type=='processInfo' && widget.options.show == true">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="taskName"
          label="节点名称"
          width="120"
        />
        <el-table-column
          prop="userName"
          label="执行人"
          width="120"
        />
        <el-table-column
          prop="statusVal"
          label="操作"
          width="120"
        />
        <el-table-column
          prop="opinion"
          label="审批意见"
          width="120"
        />
        <el-table-column
          prop="createTime"
          label="接受时间"
        />
        <el-table-column
          prop="endTime"
          label="审批时间"
        />
      </el-table>

    </template>
    <!-- 子表单的预览 -->
    <template v-if="widget.type == 'table' && widget.options.show == true">
      <fm-form-table
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :models_temp="models_temp"
      >
        <!--   <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template> -->
      </fm-form-table>
    </template>
    <!-- 区块的预览 -->
    <template v-if="widget.type == 'block' && widget.options.show == true">
      <fm-form-block
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strut-all="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-for="blank in blanks" v-slot:[blank.name]="scope">
          <slot :name="blank.name" :model="scope.model" />
        </template>
      </fm-form-block>
    </template>
    <!-- card的预览 -->
    <template v-if="widget.type == 'card' && widget.options.show == true">
      <generate-card
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strut-all="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-for="blank in blanks" v-slot:[blank.name]="scope">
          <slot :name="blank.name" :model="scope.model" />
        </template>
      </generate-card>
    </template>

    <!-- tabs的预览 -->
    <template v-if="widget.type == 'tabs' && widget.options.show == true">
      <generate-tabs
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tabColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strut-all="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-for="blank in blanks" v-slot:[blank.name]="scope">
          <slot :name="blank.name" :model="scope.model" />
        </template>
      </generate-tabs>
    </template>
    <!-- 折叠面板的预览 -->
    <template v-if="widget.type == 'collapse' && widget.options.show == true">
      <collapse-tabs
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tabColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strut-all="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-for="blank in blanks" v-slot:[blank.name]="scope">
          <slot :name="blank.name" :model="scope.model" />
        </template>
      </collapse-tabs>
    </template>
    <!--省市级联-->
    <template v-if="widget.type == 'distpicker' && widget.options.show == true">
      <distpicker v-model="dataModel" :province="widget.options.distpicker.province" :city="widget.options.distpicker.city" :area="widget.options.distpicker.area" @selected="onSelected" />
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'vue2Editor'">
      <div id="app">

        <vue-editor
          v-model="dataModel"
          class="ql-editor-class"
          use-custom-image-handler
          @image-added="handleImageAdded"
        />

      </div>
      <span
        v-if="widget.options.showAnnotation"
        :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
        @click="addAnnotation()"
      >{{ widget.options.annotationTitle }}
      </span>
    </template>

  </span>

</template>

<script>

import FmUpload from './Upload'
import ImageUpload from './widget/image/index'
import FmEditor from './Editor/tinymce'
import FmFormTable from './FormTable/formTableIndex'
import request from '../util/request.js'
import { getAllControls, findTableColumnControls } from './router/utils.js'
import API from './router/api.js'
import { VueEditor } from 'vue2-editor'
import axios from 'axios'
import vm from '../main'
import Distpicker from 'v-distpicker'

import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus
} from 'element-china-area-data'
import { verification } from './router/verification.js'
import { uniqueUser } from './router/utils.js'
import FmFormBlock from './FormBlock'
import GenerateTabs from './generate/tabs/GenerateTabs'
import GenerateCard from './generate/card/GenerateCard'
import CollapseTabs from './generate/collapse/CollapseTabs'

export default {
  name: 'GenerateElementItem',
  components: {
    FmUpload,
    FmEditor,
    FmFormTable,
    FmFormBlock,
    GenerateCard,
    CollapseTabs,
    GenerateTabs,
    VueEditor,
    ImageUpload,
    Distpicker
  },
  props: ['widget', 'value', 'models', 'remote', 'isTable', 'blanks', 'models_temp', 'path', 'strutAll'],
  data() {
    return {
      distpicker: {
        province: '省',
        city: '市',
        area: '区'
      },
      obj: {

      },
      person: {
        name: 'mark',
        gender: '男'
      },

      message: {
        a: '塞纳河畔 左岸的咖啡'
      },
      annotationForm: { context: '' },

      annotationDialogVisible: false,
      gridData: [],
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      formCustomDialogCurrentPage: 1,
      formCustomDialogPageSize: 10,
      formCustomDialogTotal: 0,
      remoteFuncsFields: [],
      formCustomDialogMultipleSelection: [],
      userDialogFormMultipleSelection: [],
      customDialogData: [],
      customDialogTableColumns: [],
      formCustomDialogData: {},
      dialogFormVisible: false,
      userDialogFormVisible: false,
      templateSelection: '',
      templateSelectionData: {},
      dataModel: this.value,
      tableData: [],
      dataModels: { ...this.models },
      provinceAndCityData: provinceAndCityData,
      regionData: regionData,
      provinceAndCityDataPlus: provinceAndCityDataPlus,
      regionDataPlus: regionDataPlus,
      selectedOptions: [],
      address: {
        province: '',
        city: '',
        county: ''
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.dataModel = newVal
    },
    dataModel(val, oldVal) {
      var _vm = vm
      if (_vm.jsExtend) {
        if (_vm.jsExtend[this.widget.model]) {
          _vm.jsExtend[this.widget.model](val, oldVal)
        }
      }

      this.$emit('input', val)

      var parent = this.$parent
      // eslint-disable-next-line no-prototype-builtins
      while (parent !== undefined && parent.hasOwnProperty('$options') && parent.$options._componentTag !== 'fm-form-block' && parent.$options._componentTag !== 'fm-form-table') {
        parent = parent.$parent
      }
      // eslint-disable-next-line no-prototype-builtins
      if (parent !== undefined && parent.hasOwnProperty('$options') && (parent.$options._componentTag === 'fm-form-block')) {
        /* this.models[this.widget.model]=val;
                     this.models_temp.push(this.widget.model);*/
        this.models[this.path] = val
        this.models_temp.push(this.path)
        // eslint-disable-next-line no-prototype-builtins
      } else if (parent !== undefined && parent.hasOwnProperty('$options') && (parent.$options._componentTag === 'fm-form-table')) {
        //                    this.models[this.widget.model]=val;
        this.models[this.path] = val
        this.models_temp.push(this.path)
      }/* else{
                    this.models[this.widget.model]=val;
                }*/
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModels = this.models
      }
    },
    dataModels: {
      deep: true,
      handler(val) {
        // this.dataModel = val[this.widget.model]   //--此行代码在表格预览有问题，导致不可输入
        this.$emit('update:models', val)
      }
    }
  },
  mounted() {
    window.watchApi = this
    this.getTableData()
    this.initTableData()
    this.initRemoteFuncs()
    // this.$set(this.obj,  '111', "4444");
  },
  created() {
    this.widget.options.remoteOptions = []
    // 表单渲染的时候，初始化数据
    if (this.widget.type === 'userDialog') {
      var dataModels_userDialog = this.dataModels[this.widget.model]
      if (dataModels_userDialog) {
        this.widget.options.chooseFiledList = dataModels_userDialog
      }
    }
    if (this.widget.type === 'tag') {
      var dataModels_tag = this.dataModels[this.widget.model]
      if (dataModels_tag) {
        this.widget.options.options = dataModels_tag
      }
      this.dataModels[this.widget.model] = this.widget.options.options
    }
    if (this.widget.type === 'progress') {
      this.dataModels[this.widget.model] = this.widget.options.percentage
    }
    if (this.widget.type === 'steps') {
      this.widget.options.defaultValue = this.dataModels[this.widget.model]
    }
    if (this.widget.type === 'distpicker') {
      debugger
      var distpicker_val = this.dataModels[this.widget.model]
      if (distpicker_val) {
        this.widget.options.distpicker.province = distpicker_val['province']
        this.widget.options.distpicker.city = distpicker_val['city']
        this.widget.options.distpicker.area = distpicker_val['county']
      }
    }
  },
  methods: {
    watchForm: function(obj1) {
      for (const key in obj1) {
        vm.jsExtend[key] = obj1[key]
      }
    },
    clickBtn: function() {
      var jsExpand = this.widget.options.jsExpand
      var scriptContext = jsExpand
      // 创建script标签，执行script内容
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.text = scriptContext
      document.getElementsByTagName('head')[0].appendChild(script)
    },
    annotationConfirm: function() {
      this.widget.options.annotationTitle = '查看批注'
      this.widget.options.annotationContext = (this.annotationForm.context)
      this.annotationForm.context = ''
      this.annotationDialogVisible = false
    },
    clearAnnotation: function() {
      this.annotationForm.context = ''
    },
    showAnnotation() {
      return '10px'
    },
    showAnnotationColor() {
      if (this.widget.options.annotationTitle === '添加批注') {
        return '#3399ff'
      } else {
        return '#cc0000'
      }
    },
    addAnnotation() {
      this.annotationForm.context = this.widget.options.annotationContext
      this.annotationDialogVisible = true
    },
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData()
      formData.append('file', file)
      const url = this.widget.options.action

      // eslint-disable-next-line no-unused-vars
      var options = { // 设置axios的参数
        url: url,
        data: formData,
        name: file.name,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios({
        method: 'POST',
        url: url,
        data: formData
      }).then((res) => {
        const data = res.data
        if (data.code === 0) {
          Editor.insertEmbed(cursorLocation, 'image', data.url)
        } else {
          this.$message.error(data.message || '操作失败')
        }
      }).catch((e) => {
        alert(e)
      })
    },
    onSelected(data) {
      this.address.province = data.province.value
      this.address.city = data.city.value
      this.address.county = data.area.value
      var model = this.widget.model
      this.dataModels[model] = this.address
    },
    handleTagClose(tag, index) {
      debugger
      this.widget.options.options.splice(index, 1)
      this.dataModels[this.widget.model] = this.widget.options.options
    },
    nextStep(widget, index) {
      var active = widget.options.defaultValue
      var activeLength = widget.options.stepItemOptions.length - 1
      if (active < activeLength) {
        widget.options.defaultValue = active + 1
      }
      if (widget.options.defaultValue >= activeLength) {
        widget.options.nextStep = true
      }
      this.dataModels[widget.model] = widget.options.defaultValue
    },
    handleClose(tag) {
      this.widget.options.chooseFiledList.splice(this.dynamicTags.indexOf(tag), 1)
    },
    userDialogFormchangeFun(val) {
      this.userDialogFormMultipleSelection = val
    },
    confirmFormCustomDialog: function() {
      this.dialogFormVisible = false
      var templateSelectionData = this.templateSelectionData
      var chooseFiledList = this.widget.options.chooseFiledList
      for (var i = 0; i < chooseFiledList.length; i++) {
        var chooseFiled = chooseFiledList[i]
        var columnKey = chooseFiled.columnKey
        var target = chooseFiled.target
        if (target) {
          var columnKey_val = templateSelectionData[columnKey]
          this.dataModels[target] = columnKey_val
        }
      }
    },

    confirmUserFormCustomDialog: function() {
      // 组织
      var userDialogFormMultipleSelections = this.userDialogFormMultipleSelection
      var isSingle = this.widget.options.isSingle
      var chooseFiledList = []
      var selectorType = this.widget.options.selectorType
      if (isSingle) {
        for (var i = 0; i < userDialogFormMultipleSelections.length; i++) {
          var obj = {}
          // eslint-disable-next-line no-unused-vars
          var userDialogFormMultipleSelection = userDialogFormMultipleSelections[i]
          if (selectorType === 'user-selector') {
            obj['lable'] = userDialogFormMultipleSelections[i].FULLNAME
            obj['key'] = userDialogFormMultipleSelections[i].USER_NO
          } else if (selectorType === 'role-selector') {
            obj['lable'] = userDialogFormMultipleSelections[i].NAME
            obj['key'] = userDialogFormMultipleSelections[i].code
          } else if (selectorType === 'job_selector') {
            obj['lable'] = userDialogFormMultipleSelections[i].name
            obj['key'] = userDialogFormMultipleSelections[i].code
          } else if (selectorType === 'post_selector') {
            obj['lable'] = userDialogFormMultipleSelections[i].POS_NAME
            obj['key'] = userDialogFormMultipleSelections[i].code
          }
          chooseFiledList.push(obj)
        }
        if (this.widget.options.chooseFiledList) {
          chooseFiledList = chooseFiledList.concat(this.widget.options.chooseFiledList)
          chooseFiledList = uniqueUser(chooseFiledList)
        }
        this.widget.options.chooseFiledList = chooseFiledList
        this.dataModels[this.widget.model] = chooseFiledList
      } else {
        // eslint-disable-next-line no-redeclare
        var chooseFiledList = []
        // eslint-disable-next-line no-redeclare
        var obj = {}
        if (selectorType === 'user-selector') {
          obj['lable'] = this.templateSelectionData.FULLNAME
          obj['key'] = this.templateSelectionData.USER_NO
        } else if (selectorType === 'role-selector') {
          obj['lable'] = this.templateSelectionData.NAME
          obj['key'] = this.templateSelectionData.code
        } else if (selectorType === 'job_selector') {
          obj['lable'] = this.templateSelectionData.name
          obj['key'] = this.templateSelectionData.code
        } else if (selectorType === 'post_selector') {
          obj['lable'] = this.templateSelectionData.POS_NAME
          obj['key'] = this.templateSelectionData.code
        }
        chooseFiledList.push(obj)
        this.widget.options.chooseFiledList = chooseFiledList
        this.dataModels[this.widget.model] = chooseFiledList
      }

      this.userDialogFormVisible = false
    },
    changeFormCustomDialogFun: function(val) {
      this.formCustomDialogMultipleSelection = val
    },
    handleformCustomDialogSizeChange(val) {
      this.formCustomDialogPageSize = val
      this.formCustomDialogTableChange()
    },
    handleformCustomDialogCurrentChange(val) {
      this.formCustomDialogCurrentPage = val
      this.formCustomDialogTableChange()
    },
    handleUserformCustomDialogSizeChange(val) {
      this.formCustomDialogPageSize = val
      this.formUserCustomDialogTableChange()
    },
    handleUserformCustomDialogCurrentChange(val) {
      this.formCustomDialogCurrentPage = val
      this.formUserCustomDialogTableChange()
    },
    formUserCustomDialogTableChange: function() {
      var customDialogAlias = this.widget.options.customDialogAlias
      if (customDialogAlias.length <= 0) {
        customDialogAlias = this.widget.options.selectorType
      }
      request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias + '?length=' + this.formCustomDialogPageSize + '&page=' + this.formCustomDialogCurrentPage).then(res => {
        if (res.code === 0) {
          var data = res.data

          this.customDialogData = data
          var tableColumns = res.tableColumns
          this.customDialogTableColumns = tableColumns
          this.formCustomDialogData = res.formCustomDialogData
          this.userDialogFormVisible = true
          this.formCustomDialogTotal = parseInt(res.count)
        }
      })
    },
    formCustomDialogTableChange: function() {
      var customDialogAlias = this.widget.options.customDialogAlias
      if (customDialogAlias.length <= 0) {
        customDialogAlias = this.widget.options.selectorType
      }
      request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias + '?length=' + this.formCustomDialogPageSize + '&page=' + this.formCustomDialogCurrentPage).then(res => {
        if (res.code === 0) {
          var data = res.data

          this.customDialogData = data
          var tableColumns = res.tableColumns
          this.customDialogTableColumns = tableColumns
          this.formCustomDialogData = res.formCustomDialogData
          this.dialogFormVisible = true
          this.formCustomDialogTotal = parseInt(res.count)
        }
      })
    },

    singleElection(row) {
      this.templateSelection = this.tableData.indexOf(row)
      // this.templateRadio = row.id;
      this.templateSelectionData = row
    },
    userDialogingleElection(row) {
      this.templateSelection = this.tableData.indexOf(row)
      // this.templateRadio = row.id;
      this.templateSelectionData = row
    },
    handleDialog: function() {
      if (this.widget.options.customDialogAlias.length > 0) {
        var customDialogAlias = this.widget.options.customDialogAlias
        request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias).then(res => {
          if (res.code === 0) {
            var data = res.data
            this.customDialogData = data
            var tableColumns = res.tableColumns
            this.customDialogTableColumns = tableColumns
            this.formCustomDialogData = res.formCustomDialogData
            this.dialogFormVisible = true
            this.formCustomDialogTotal = parseInt(res.count)
          }
        })
      } else {
        this.$message.error('没有选择关联的对话框数据')
      }
    },
    handleUserDialog: function() {
      if (this.widget.options.selectorType.length > 0) {
        var selectorType = this.widget.options.selectorType
        request.get(API.prefix + '/form/customDialog/get/alia/' + selectorType).then(res => {
          if (res.code === 0) {
            var data = res.data
            this.customDialogData = data
            var tableColumns = res.tableColumns
            this.customDialogTableColumns = tableColumns
            this.formCustomDialogData = res.formCustomDialogData
            this.userDialogFormVisible = true
            this.formCustomDialogTotal = parseInt(res.count)
          }
        })
      } else {
        this.$message.error('请先设置选择器')
      }
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback)
    },
    fireControlsRule: function(data) {
      var dataModel = this.dataModel

      var effect = this.widget.options.effect
      if (effect.length > 0) {
        if (this.strutAll) {
          var list = this.strutAll.list
          if (list) {
            for (var i = 0; i < effect.length; i++) {
              var nodes = effect[i]
              if (nodes.value === dataModel) {
                var effects = nodes.effects

                for (var j = 0; j < effects.length; j++) {
                  var node = effects[j]
                  var target = node.target
                  var type = node.type

                  for (let j = 0; j < list.length; j++) {
                    var allNode = list[j]
                    if (allNode.model === target) {
                      if (type === 'n') {
                        allNode.options.show = false
                      } else if (type === 'w') {
                        allNode.options.show = true
                      } else if (type === 'b') {
                        allNode.options.required = true
                        // eslint-disable-next-line no-redeclare
                        var data = {}
                        data['validator'] = this.validatePass
                        data['trigger'] = 'blur'
                        data['msg'] = '必填'
                        data['customerType'] = 'nonull'
                        allNode.rules.push(data)
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    initRemoteFuncs: function() {
      var remoteUrlKey = this.widget.options.remoteUrlKey
      if (this.widget.options) {
        if (remoteUrlKey) {
          if (this.widget.type === 'select' || this.widget.type === 'radio') {
            if (remoteUrlKey && remoteUrlKey.length > 0) {
              request.get(API.prefix + remoteUrlKey).then(res => {
                var options = res.data
                var datas = []
                if (res.code === 0) {
                  for (var i = 0; i < options.length; i++) {
                    var obj = {}
                    obj['label'] = options[i]['label']
                    obj['value'] = options[i]['value']
                    datas.push(obj)
                  }
                  this.remoteFuncsFields = datas
                }
              })
            }
          } else {
            if (this.widget.options.props) {
              var label = this.widget.options.props.label
              var value = this.widget.options.props.value
              if (remoteUrlKey && remoteUrlKey.length > 0) {
                request.get(API.prefix + '/form/customQuery/manger/' + remoteUrlKey).then(res => {
                  var options = res.data
                  var datas = []
                  if (res.code === 0) {
                    for (var i = 0; i < options.length; i++) {
                      var obj = {}
                      obj[label] = options[i][label]
                      obj[value] = options[i][value]
                      datas.push(obj)
                    }
                    this.remoteFuncsFields = datas
                  }
                })
              }
            }
          }
        }
      }
    },
    changeDate() {
      var strutAll = this.strutAll
      var path = this.path
      if (path !== undefined) {
        // 区域外的
        if (path) {
          var pathDot = path.split('.')
          if (pathDot) {
            var blockId = pathDot[0]
            var index = pathDot[1]
            var list = strutAll.list
            var curNode = this.widget.model
            var otherNodes = findTableColumnControls(list, blockId, index)
            if (otherNodes) {
              for (var i = 0; i < otherNodes.length; i++) {
                var node = otherNodes[i]
                var dateCalculationEnd = node.options.dateCalculationEnd
                var dateCalculationStart = node.options.dateCalculationStart

                var dateCalcDiffType = node.options.dateCalcDiffType

                var dateCalculationEndVal = this.$parent.elForm.model[blockId][index][node.options.dateCalculationEnd]
                var dateCalculationStartVal = this.$parent.elForm.model[blockId][index][node.options.dateCalculationStart]
                var operateVal = ''
                if (dateCalculationStartVal && dateCalculationEndVal) {
                  if (dateCalculationEnd === curNode || dateCalculationStart === curNode) {
                    operateVal = dateCalculationEndVal - dateCalculationStartVal
                  }
                  if (operateVal > 0) {
                    if (dateCalcDiffType === 'day') {
                      operateVal = operateVal / (24 * 60 * 60 * 1000)
                    } else if (dateCalcDiffType === 'hour') {
                      operateVal = operateVal / (60 * 60 * 1000)
                    } else if (dateCalcDiffType === 'minute') {
                      operateVal = operateVal / (60 * 1000)
                    } else if (dateCalcDiffType === 'second') {
                      operateVal = operateVal / (1000)
                    }
                    operateVal = parseInt(operateVal)
                    this.$parent.elForm.model[blockId][index][node.model] = operateVal
                  }
                }
              }
            }
          }
        }
      } else {
        // eslint-disable-next-line no-redeclare
        var list = strutAll.list
        // eslint-disable-next-line no-redeclare
        var otherNodes = getAllControls(strutAll.list, this.widget.model)
        // eslint-disable-next-line no-redeclare
        var curNode = this.widget.model
        // eslint-disable-next-line no-redeclare
        for (var i = 0; i < otherNodes.length; i++) {
          // eslint-disable-next-line no-redeclare
          var node = otherNodes[i]
          // eslint-disable-next-line no-redeclare
          var dateCalculationEnd = node.options.dateCalculationEnd
          // eslint-disable-next-line no-redeclare
          var dateCalculationStart = node.options.dateCalculationStart
          // eslint-disable-next-line no-redeclare
          var dateCalcDiffType = node.options.dateCalcDiffType
          // eslint-disable-next-line no-redeclare
          var dateCalculationEndVal = this.$parent.elForm.model[node.options.dateCalculationEnd]
          // eslint-disable-next-line no-redeclare
          var dateCalculationStartVal = this.$parent.elForm.model[node.options.dateCalculationStart]
          // eslint-disable-next-line no-redeclare
          var operateVal = ''
          if (dateCalculationStartVal && dateCalculationEndVal) {
            if (dateCalculationEnd === curNode || dateCalculationStart === curNode) {
              operateVal = dateCalculationEndVal - dateCalculationStartVal
            }
            if (operateVal > 0) {
              if (dateCalcDiffType === 'day') {
                operateVal = operateVal / (24 * 60 * 60 * 1000)
              } else if (dateCalcDiffType === 'hour') {
                operateVal = operateVal / (60 * 60 * 1000)
              } else if (dateCalcDiffType === 'minute') {
                operateVal = operateVal / (60 * 1000)
              } else if (dateCalcDiffType === 'second') {
                operateVal = operateVal / (1000)
              }
              operateVal = parseInt(operateVal)
              this.$parent.elForm.model[node.model] = operateVal
            }
          }
        }
      }
    },
    elShowWidth(elIsTable, wowidth) {
      if (elIsTable === 'table') {
        return '95%'
      } else if (elIsTable === 'block') {
        return '70%'
      } else {
        if (wowidth === '200px') {
          return '100%'
        } else {
          return wowidth
        }
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    initTableData() {
      var self = this
      self.gridData = [{ name: '张三' }, { name: '李四' }]
    },
    getTableData: function() {
      var self = this
      if (this.$route) {
        const params = this.$route.query
        // eslint-disable-next-line no-unused-vars
        var processInstanceId = params.processInstanceId
      }

      self.tableData = []
      // if (processInstanceId){
      //     request.get(API.prefix+'/a1bpmn/api/runtime/hisInstance/v2/nodeOpinion/'+processInstanceId+'?page=1&limit=5').then(res => {
      //         var data=  res.data;
      //
      //
      //     })
      // }
      // if (checkIsNullOrEmpty(processInstanceId)) {
      //     if (self.tableData.length==0){
      //
      //     }
      // }
    },
    handleEdit(index, row) {
      // console.log(index, row.name);
    },
    handleDelete(index, row) {
      // console.log(index, row);
    },
    processRemoteProps(children, props) {
      if (children.length) {
        return children.map(item => {
          if (this.processRemoteProps(item[props.children]).length) {
            return {
              value: item[props.value],
              label: item[props.label],
              children: this.processRemoteProps(item[props.children])
            }
          } else {
            return {
              value: item[props.value],
              label: item[props.label]
            }
          }
        })
      } else {
        return []
      }
    }
  }

}
</script>

<style type="text/css">
                      .ql-editor-class {
                          -webkit-box-sizing: border-box;
                          box-sizing: border-box;
                          line-height: 1.42;
                          height: 100%;
                          outline: none;
                          padding: 0 !important;
                          tab-size: 4;
                          -moz-tab-size: 4;
                          text-align: left;
                          word-wrap: break-word;
                      }
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .st0 {
        fill: #F9F9F9;
        stroke: #F9F9F9;
        stroke-miterlimit: 10;
    }

    .st1 {
        fill: #FFFFFF;
        stroke: #F9F9F9;
        stroke-miterlimit: 10;
    }

    .st2 {
        fill: #FFFFFF;
        stroke: #F9F9F9;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
    }

    .st3 {
        opacity: 0.65;
        fill: #040000;
    }

    .st4 {
        font-family: 'MicrosoftYaHei';
    }

    .st5 {
        font-size: 10px;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
